<template>
	<view>
		<!-- 可以在这里添加商品详情展示 -->
		<view v-if="goodsDetail">
			<view>
				<image style="width: 100%;" mode="widthFix" :src="goodsDetail.goodsDetailPic"></image>
			</view>
			<view class="bottom-bar">
				<view class="price">¥ {{goodsDetail.goodsPrice}}</view>
				<button class="purchase-btn" @click="goToBuy(goodsDetail.id)">立即购买</button>
			</view>
		</view>
		
		<!-- 底部弹窗选择镜片 -->
		<view class="modal-overlay" v-if="showLensModal" @click="closeLensModal"></view>
		<view class="lens-modal" v-if="showLensModal">
			<view class="modal-header">
				<text class="modal-title">延缓近视度数增长平均达74%</text>
				<view class="close-btn" @click="closeLensModal">×</view>
			</view>
			<view class="lens-list">
				<view class="lens-item" v-for="(lens, key) in goodsDetail.switchList" :key="key"
					@click="selectLens(key, lens)"
					:class="{ 'selected': selectedSwitchKey === key }">
					<image :src="lens" mode="aspectFill"></image>
					<!-- <view class="selected-icon" v-if="selectedSwitchKey === key">✓</view> -->
				</view>
			</view>
			<view class="modal-footer">
				<button class="confirm-btn" @click="confirmLensSelection">确认提交</button>
			</view>
		</view>
	</view>
</template>
  
<script>  
  export default {
	data() {
	  return {
		goodsDetail: null,
		goodsIds: '',
		selectedSwitchKey: '',
		showLensModal: false,
		lensOptions: []
	  }
	},
	onLoad(options) {
	  this.goodsIds = options.goodsIds
	  if (this.goodsIds) {
		  this.fetchGoodsDetail()
	  }
	},
	methods: {
	  fetchGoodsDetail() {
		const that = this
		this.$http.GET('/app/order/order/goodsDetailV2', {
			id: that.goodsIds
		}, (res) => {
          that.goodsDetail = res.data;
        }, (err) => {
          console.error('请求接口失败', err);
          uni.showToast({
            title: '请求接口失败',
            icon: 'none'
          });
        })
	  },
	  goToBuy() {
			const that = this
      // 检查是否有switchList参数
      if (that.goodsDetail && that.goodsDetail.switchList && Object.keys(that.goodsDetail.switchList).length > 0) {
        // 显示自定义弹窗
        that.showLensModal = true;
      } else {
        // 没有switchList参数，直接创建订单
        that.createOrder();
      }
    },
    
    // 关闭镜片选择弹窗
    closeLensModal() {
      this.showLensModal = false;
    },
    
    // 选择镜片
    selectLens(key, lens) {
      this.selectedSwitchKey = key;
    },
    
    // 确认选择镜片
    confirmLensSelection() {
      if (this.selectedSwitchKey) {
        this.createOrderWithSwitchKey();
        this.showLensModal = false;
      } else {
        uni.showToast({
          title: '请选择镜片',
          icon: 'none'
        });
      }
    },
    // 创建订单方法（包含switchKey）
    createOrderWithSwitchKey() {
      const that = this
      let params = {
        // goodsIds: this.goodsIds.split(','),
        goodsIds: [this.selectedSwitchKey],
        switchKey: this.selectedSwitchKey
      }
      if (uni.getStorageSync('shopId')) {
        params.shopId = uni.getStorageSync('shopId')
      }
      this.$http.POST('/app/order/order/createOrderByGoodsIds', params, (res) => {
        if (res.code === 1000) {
          that.$tools.routerTo('/pages/index/orderDetail?orderId=' + res.data.orderId, 'navigateTo', 'none')
        } else {
          uni.showToast({
            title: res.message,
            icon: 'none'
          });
        }
      }, (err) => {
        console.error('请求接口失败', err);
        uni.showToast({
          title: err.message,
          icon: 'none'
        });
      });
    },
    // 原始创建订单方法
    createOrder() {
      const that = this
      let params = {
        goodsIds: this.goodsIds.split(','),
      }
      if (uni.getStorageSync('shopId')) {
        params.shopId = uni.getStorageSync('shopId')
      }
      this.$http.POST('/app/order/order/createOrderByGoodsIds', params, (res) => {
        if (res.code === 1000) {
          that.$tools.routerTo('/pages/index/orderDetail?orderId=' + res.data.orderId, 'navigateTo', 'none')
        } else {
          uni.showToast({
            title: res.message,
            icon: 'none'
          });
        }
      }, (err) => {
        console.error('请求接口失败', err);
        uni.showToast({
          title: err.message,
          icon: 'none'
        });
      });
    }
	}
  }
</script>
  
<style>
.bottom-bar {
  position: fixed;
  bottom: 20px; /* 添加底部间距，使方块脱离底部 */
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #fff;
  border-radius: 20px; /* 调整为统一圆角 */
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  margin: 0 10px;
}

.price {
  font-size: 18px;
  color: #e64340;
}

.purchase-btn {
  background-color: #e64340;
  color: white;
  border-radius: 20px;
  width: 120px;
  margin: 0;
}

/* 底部弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 998;
}

.lens-modal {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border-radius: 20px 20px 0 0;
  z-index: 999;
  max-height: 80vh;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.modal-title {
  font-size: 18px;
  font-weight: bold;
  color: #36b7b0;
}

.close-btn {
  font-size: 28px;
  color: #999;
  padding: 0 10px;
}

.lens-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 20px;
}

.lens-item {
  position: relative;
  width: 100%;
  aspect-ratio: 577 / 782;
  border: 2px solid #eee;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f8f8;
  filter: grayscale(100%);
  transition: all 0.3s ease;
}

.lens-item.selected {
  border-color: #36b7b0;
  filter: grayscale(0%);
}

.lens-item image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.selected-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  background-color: #36b7b0;
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
}

.modal-footer {
  padding: 20px;
  border-top: 1px solid #eee;
}

.confirm-btn {
  background-color: #36b7b0;
  color: white;
  border-radius: 40px;
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  margin: 0;
}
</style>